// 改文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//也是一个构造函数，可以new出来
//创建并一个路由器，先不暴露，给路由器加路由守卫
const router = new VueRouter({
    //在routes中配置一个个的路由
    routes:[
        {
            name:'guanyu',
            path:'/about11',
            component:About,
            meta:{isAuth:true,title:'关于'}, // meta：路由元信息，用于存放自定义信息
            //对象路由守卫
            beforeEnter:(to,from,next) => {
                console.log('独享路由守卫：beforeEnter......')
                next()
            }
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            // 二级路由，会根据一级路由自动拼接 /
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'},
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            // 给路由路径加占位符
                            path:'detail/:id/:titleName',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
                            //谁接收参数给谁配置
                            // props的第一种写法：值为对象。对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}
                            // props的第二种写法：值为布尔值。若为真-就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true
                            // props的第三种写法：值为回调函数。只需要定义，vue-route会调用并传入$route
                            props($route){
                                return {
                                    id:$route.params.id,
                                    titleName:$route.params.titleName
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

router.beforeEach((to,from,next)=>{
    console.log('全局前置路由守卫：beforeEach......')
    next()
})
router.afterEach((to,from)=>{
    console.log('全局后置路由守卫：afterEach......')
})
export default router